import React, { useState, useEffect } from 'react';
import apiConfigManager from '../utils/apiConfigManager';
import './ApiConfigSwitcher.css';

const ApiConfigSwitcher = () => {
  const [currentApi, setCurrentApi] = useState(null);
  const [availableApis, setAvailableApis] = useState({});
  const [showConfig, setShowConfig] = useState(false);
  const [customUrl, setCustomUrl] = useState('');

  useEffect(() => {
    loadApiConfig();
  }, []);

  const loadApiConfig = () => {
    const current = apiConfigManager.getCurrentApi();
    const available = apiConfigManager.getAvailableApis();
    setCurrentApi(current);
    setAvailableApis(available);
  };

  const handleApiChange = async (type) => {
    try {
      apiConfigManager.setApiConfig(type, customUrl);
      loadApiConfig();
      setShowConfig(false);
      
      // 刷新页面以应用新配置
      window.location.reload();
    } catch (error) {
      console.error('切换API配置失败:', error);
      alert('切换API配置失败: ' + error.message);
    }
  };

  const handleCustomUrlSubmit = () => {
    if (!customUrl.trim()) {
      alert('请输入有效的API地址');
      return;
    }
    handleApiChange('custom');
  };

  return (
    <div className="api-config-switcher">
      <button 
        className="config-toggle-btn"
        onClick={() => setShowConfig(!showConfig)}
      >
        🔧 API配置
      </button>

      {showConfig && (
        <div className="config-panel">
          <div className="current-api">
            <h3>当前配置</h3>
            <div className="current-api-info">
              <strong>{currentApi?.name}</strong>
              <span className="api-url">{currentApi?.url}</span>
              <span className="api-description">{currentApi?.description}</span>
            </div>
          </div>

          <div className="available-apis">
            <h3>可用配置</h3>
            {Object.entries(availableApis).map(([key, api]) => (
              <div key={key} className="api-option">
                <div className="api-info">
                  <strong>{api.name}</strong>
                  <span className="api-url">{api.url}</span>
                  <span className="api-description">{api.description}</span>
                </div>
                <div className="api-actions">
                  <button 
                    className="switch-btn"
                    onClick={() => handleApiChange(key)}
                  >
                    切换
                  </button>
                </div>
              </div>
            ))}
          </div>

          <div className="custom-api">
            <h3>自定义API地址</h3>
            <div className="custom-input">
              <input
                type="text"
                placeholder="输入API地址，如: https://your-api.com"
                value={customUrl}
                onChange={(e) => setCustomUrl(e.target.value)}
              />
              <button onClick={handleCustomUrlSubmit}>设置</button>
            </div>
          </div>

          <div className="config-actions">
            <button 
              className="close-btn"
              onClick={() => setShowConfig(false)}
            >
              关闭
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ApiConfigSwitcher; 